<template>
<!--  loading  -->
  <transition name="van-fade">
    <div class="masker-layer" v-show="loadingCtrl">
      <div class="loading">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  </transition>
<!--  success  -->
  <transition name="van-fade">
    <div class="masker-layer" v-show="successCtrl">
      <div class="checkmark-wrapper">
        <div class="load-circle">
          <div class="checkmark draw"></div>
        </div>
      </div>
    </div>
  </transition>
<!--  error -->
  <transition name="van-fade">
    <div class="masker-layer" v-show="errorCtrl">
      <div class="error">
        <span>!</span>
        <div class="van-ellipsis">{{ errMessage }}</div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  data () {
    return {
      loadingCtrl: false, // 加载提示控件
      successCtrl: false, // 成功提示控件
      errorCtrl: false, // 失败提示控件
      errMessage: undefined // 失败消息
    }
  },
  methods: {
    showLoading () {
      this.clearImmediate()
      this.loadingCtrl = true
    },
    showSuccess () {
      this.clearImmediate()
      this.successCtrl = true
      this.clear()
    },
    showError (errMsg = '失败') {
      this.clearImmediate()
      this.errorCtrl = true
      this.errMessage = errMsg
      this.clear()
    },
    clearImmediate () {
      this.loadingCtrl = false
      this.successCtrl = false
      this.errorCtrl = false
    },
    clear () {
      setTimeout(() => {
        this.loadingCtrl = false
        this.successCtrl = false
        this.errorCtrl = false
      }, 800)
    }
  }
}
</script>

<style lang="less">
/********* loading **********/
.masker-layer {
  height: 100vh;
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100 !important;
}

.loading {
  --speed-of-animation: 0.9s;
  --gap: 6px;
  --first-color: #4c86f9;
  --second-color: #49a84c;
  --third-color: #f6bb02;
  --fourth-color: #f6bb02;
  --fifth-color: #2196f3;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6.25rem;
  gap: 0.375rem;
  height: 6.25rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0.625rem;
  background-color: #000;
  opacity: .8;

}

.loading span {
  width: 4px;
  height: 50px;
  background: var(--first-color);
  animation: scale var(--speed-of-animation) ease-in-out infinite;
}

.loading span:nth-child(2) {
  background: var(--second-color);
  animation-delay: -0.8s;
}

.loading span:nth-child(3) {
  background: var(--third-color);
  animation-delay: -0.7s;
}

.loading span:nth-child(4) {
  background: var(--fourth-color);
  animation-delay: -0.6s;
}

.loading span:nth-child(5) {
  background: var(--fifth-color);
  animation-delay: -0.5s;
}

@keyframes scale {

  0%,
  40%,
  100% {
    transform: scaleY(0.05);
  }

  20% {
    transform: scaleY(1);
  }
}
/********* success **********/
@brand-success: #5cb85c;
@loader-size: 112px;
@check-height: 56px;
@check-width: 28px;
@check-left: (18.66 + 10.88)px;
@check-thickness: 3px;
@check-color: @brand-success;
/**描述： checkmark*/
.checkmark-wrapper {
  width: 6.25rem;
  height: 6.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0.625rem;
  background-color: #000;
  opacity: .8;

  .load-circle {
    width: 80%;
    height: 80%;
    position: relative;
  }
}

.checkmark {
  display: block;
  &.draw:after {
    animation-duration: 800ms;
    animation-timing-function: ease;
    animation-name: checkmark;
    transform: scaleX(-1) rotate(135deg);
  }

  &:after {
    content: '';
    opacity: 1;
    position: absolute;
    height: @check-height;
    width: @check-width;
    transform-origin: left top;
    border-right: @check-thickness solid @check-color;
    border-top: @check-thickness solid @check-color;
    left: 13%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
}
// checkmark animate
@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: @check-width;
    opacity: 1;
  }
  40% {
    height: @check-height;
    width: @check-width;
    opacity: 1;
  }
  100% {
    height: @check-height;
    width: @check-width;
    opacity: 1;
  }
}

/*--------------- error ---------------*/
.error {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 6.25rem;
  height: 6.25rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0.625rem;
  background-color: #000;
  opacity: .8;
  span:nth-child(1) {
    display: inline-block;
    width: 18px;
    height: 54px;
    color: #ee0a24;
    font-size: 40px;
    text-align: center;
  }
  .van-ellipsis {
    color: white;
    opacity: .8;
    font-size: @text-size-mini;
  }
}
</style>
